<template>
  <view>
    <view class="pages">
      <view v-if="detailsInfo?.type == 1 || detailsInfo?.type == 3" class="card  u-p-b-10">
        <view class="title u-p-t-20 u-p-b-20">
          基本信息
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">姓名</view>
          <view class="u-main-color">{{ detailsInfo?.u_name || '暂无' }}</view>
        </view>
        <view class="items u-border-bottom u-flex" v-if="detailsInfo?.type == 1 || detailsInfo?.type == 2">
          <view class="u-flex-1 u-content-color">身高</view>
          <view class="u-main-color">{{ detailsInfo?.u_height || '暂无' }}</view>
        </view>
        <view class="items u-border-bottom u-flex" v-if="detailsInfo?.type == 3">
          <view class="u-flex-1 u-content-color">年龄</view>
          <view class="u-main-color">{{ detailsInfo?.u_age || '暂无' }}</view>
        </view>
        <view class="items u-border-bottom u-flex" v-if="detailsInfo?.type == 3">
          <view class="u-flex-1 u-content-color">出生日期</view>
          <view class="u-main-color">{{ detailsInfo?.u_birthday || '暂无' }}</view>
        </view>
        <view v-if="detailsInfo?.due_product == 2" class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">体重</view>
          <view class="u-main-color">{{ detailsInfo?.u_weight || '暂无' }}</view>
        </view>
        <view v-if="detailsInfo?.due_product == 1" class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">孕前体重</view>
          <view class="u-main-color">{{ detailsInfo?.u_weight || '暂无' }}</view>
        </view>
        <view v-if="detailsInfo?.due_product == 1" class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">目前体重</view>
          <view class="u-main-color">{{ detailsInfo?.u_conceive_weight || '暂无' }}</view>
        </view>
        <view v-if="detailsInfo?.due_product == 2" class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">生产日期</view>
          <view class="u-main-color">{{ detailsInfo?.u_product_date || '暂无' }}</view>
        </view>
        <view v-if="detailsInfo?.type == 1 && detailsInfo?.status == 1" class="items u-flex">
          <view class="u-flex-1 u-content-color">预产期</view>
          <view class="u-main-color">{{ detailsInfo?.u_due_date || '暂无' }}</view>
        </view>
        <view v-if="detailsInfo?.due_product == 2" class="items u-flex">
          <view class="u-flex-1 u-content-color">宝宝性别</view>
          <view v-if="detailsInfo?.u_baby_sex == 1" class="u-main-color">男</view>
          <view v-if="detailsInfo?.u_baby_sex == 2" class="u-main-color">女</view>
          <view v-if="detailsInfo?.u_baby_sex == 3" class="u-main-color">龙凤胎</view>
          <view v-if="detailsInfo?.u_baby_sex == 0" class="u-main-color">未设置</view>
        </view>
      </view>
      <!-- 男性 -->
      <view v-if="detailsInfo?.type == 2" class="card  u-p-b-10">
        <view class="title u-p-t-20 u-p-b-20">
          基本信息
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">姓名</view>
          <view class="u-main-color">{{ detailsInfo?.u_name || '暂无' }}</view>
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">性别</view>
          <view class="u-main-color">男</view>
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">年龄</view>
          <view class="u-main-color" v-if="detailsInfo?.u_age">{{ detailsInfo?.u_age }}岁</view>
          <view class="u-main-color" v-else>暂无</view>
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">类型</view>
          <view class="u-main-color">{{ detailsInfo?.u_disease_name || '暂无' }}</view>
        </view>
        <view class="items ">
          <view class="u-p-b-20 u-content-color">主诉</view>
          <view class="textBox">{{ detailsInfo?.u_describe || '暂无' }}</view>
        </view>
        <view class="items ">
          <view class="u-p-b-20 u-content-color">检查报告/病例</view>
          <view class="report_img">
          <image v-for="(item, index) in detailsInfo?.report_image" :key="index" :src="item"
            @click="previewImg(detailsInfo?.report_image, index)" mode="scaleToFill" />
        </view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="card u-m-t-20 u-p-b-10">
        <view class="title u-p-t-20 u-p-b-20">
          订单信息
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">订单编号</view>
          <view class="u-main-color">{{ detailsInfo?.sn || '暂无' }}</view>
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">服务类型</view>
          <view class="u-main-color" v-if="detailsInfo?.type == 1">孕产跟踪</view>
          <view class="u-main-color" v-if="detailsInfo?.type == 2">男性问诊</view>
          <view class="u-main-color" v-if="detailsInfo?.type == 3">儿科跟踪</view>
        </view>
        <view v-if="detailsInfo?.service_name == '次卡' || detailsInfo?.service_name == '月卡'" class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">服务内容</view>
          <view class="u-main-color">{{ detailsInfo?.service_name || '暂无' }}</view>
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">服务方式</view>
          <view class="u-main-color">{{ detailsInfo?.service_type_name || '暂无' }}</view>
        </view>
        <view class="items u-border-bottom u-flex">
          <view class="u-flex-1 u-content-color">问诊时间</view>
          <view class="u-main-color">{{ detailsInfo?.last_time || '暂无' }}</view>
        </view>
        <view class="items   u-flex">
          <view class="u-flex-1 u-content-color">订单金额</view>
          <view class="u-main-color">{{ detailsInfo?.total_price || '暂无' }}元</view>
        </view>
      </view>
    </view>
  </view>
  <view class="kong" style="height: 120rpx;"></view>
  <view class="footer" v-if="detailsInfo?.status < 4">
    <view class="btns" @click="toInterrogation(detailsInfo)" v-if="detailsInfo?.status==2 || detailsInfo?.status==1">发起问诊</view>
    <view class="btns" @click="toInterrogation(detailsInfo)" v-if="detailsInfo?.status==3">查看问诊历史</view>
    <!-- <view style="width : 750rpx;" :style="{height:bottoms + 'px'}"></view> -->
  </view>
</template>

<script setup>
  import {
    ref
  } from "vue"
  import {
    navigateTo,
    showToast,
    navigateBack
  } from '@/utils'
  import {
    onLoad,
    onReachBottom,
    onShow,
    onReady
  } from '@dcloudio/uni-app'
  import { getOrderDetailApi } from '@/api/patients/index'
  const orderId = ref(0)
  onLoad((options) => {
    if(options?.id){
      orderId.value = options.id
      getOrderDetail()
    }
  })
const bottoms = ref(0)
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      bottoms.value = e.safeAreaInsets.bottom
    }
  })
})
const detailsInfo = ref({})
async function getOrderDetail(){
  const res = await getOrderDetailApi({order_id:orderId.value})
  if(res?.code == 200){
    detailsInfo.value = res?.data
    uni.setNavigationBarTitle({
      title: res?.data?.status_name,
    })
  }
}
//预览图片
function previewImg(list, index) {
  uni.previewImage({
    urls: list,
    current: index,
    fail: (err) => {
      console.log(err)
    },
  })
}
//问诊
function toInterrogation(row) {
  if(row?.type == 3){
    navigateTo(
      `/pregnancys/index/doctor-chat?uid=${row?.user_info?.uid}&avatar=${row?.user_info?.avatar}&name=${row?.user_info?.nickname}&chat_type=${row?.type}&childId=${row?.children_user_id}`,
    )
  }else{
    navigateTo(
      `/pregnancys/index/doctor-chat?uid=${row?.uid}&avatar=${row?.avatar}&name=${row?.u_name}&chat_type=${row?.type}`,
    )
  }
}
//问诊历史
// const toHistoryMsg = (row) =>{
//   navigateTo(`/pregnancys/index/doctor-chat-message?id=${row?.uid}&avatar=${row?.avatar}&nickname=${row?.u_name}&chat_type=${row.type}`)
// }
</script>

<style>

</style>
<style>
  page {
    background: #F5F6F8;
  }
</style>
<style scoped lang="scss">
  .pages {
    padding: 20rpx 24rpx;
  }

  .card {
    padding: 0 20rpx;
    border-radius: 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    display: block;
    background: #fff;

    .items {
      padding: 20rpx 0;
      color: #5C5C5C;
      &:last-child{
        border: none!important;
      }
    }

    .title {
      font-weight: 600;
      font-size: 30rpx;
      color: #202020;
    }

    .textBox {
      background: #F5F6F8;
      border-radius: 10rpx;
      padding: 20rpx;
      font-size: 26rpx;
      color: #202020;
      line-height: 37rpx;
      text-align: justify;
      font-style: normal;
    }
  }

  .footer {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    padding: 12rpx 24rpx;
    padding-bottom: calc(15rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(15rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

    .btns {
      height: 88rpx;
      line-height: 88rpx;
      background: #00C1B9;
      border-radius: 48rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
    }

    .btns1 {
      background: #FFFFFF;
      border-radius: 48rpx;
      border: 1rpx solid #00C1B9;
      height: 88rpx;
      line-height: 88rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #00C1B9;
      text-align: center;
    }

    .btns3 {

      border-radius: 0 48rpx 48rpx 0;
      background: #00C1B9;
      color: #fff;
    }

  }
  .report_img {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 10rpx;

        &::after {
          content: '';
          width: 214rpx;
        }

        image {
          width: 214rpx;
          height: 214rpx;
          border-radius: 16rpx;
          margin-top: 10rpx;
        }
      }
</style>
